<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="curMenu.icon"></i>
            <span>{{ curMenu.description }}</span>
        </h1>
        <div class="body-main">
            <div class="kit-list">
                <div class="col" v-for="(v, i) in menu" :key="i" v-if="i > 0 && !v.separator">
                    <router-link
                        draggable="false"
                        class="link"
                        :class="{active:menuActive === i}"
                        :to="v.to">
                        <i class="icon" :class="v.icon"></i>
                        <span>{{ v.title }}</span>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name    : 'index',
    computed: {
        /*菜单*/
        ...mapGetters({
            'menu'      : 'menu/lists',
            'getMenu'   : 'menu/getMenu',
            'menuActive': 'menu/activeIndex'
        })
    },
    data () {
        return {
            curMenu: {}
        };
    },
    mounted () {
        this.curMenu = this.getMenu(this.$options.name);
    }
};
</script>

<style scoped lang="less">
.kit-list {
    display    : flex;
    flex-wrap  : wrap;
    margin-top : 10px;

    .col {
        width           : 20%;
        flex-grow       : 0;
        flex-shrink     : 0;
        display         : flex;
        align-items     : center;
        justify-content : center;
        padding         : 10px;

        .link {
            .animation;
            display               : flex;
            flex-direction        : column;
            align-items           : center;
            justify-content       : center;
            width                 : 100%;
            height                : 120px;
            border                : 1px solid #393939;
            -webkit-border-radius : 10px;
            -moz-border-radius    : 10px;
            border-radius         : 10px;
            color                 : #fff;

            .icon {
                font-size       : 40px;
                height          : 60px;
                display         : flex;
                align-items     : center;
                justify-content : center;
                font-weight     : normal;
            }

            span {
                font-size : 18px;
            }

            &:hover {
                background : fade(@blue, 20%);
                border     : 1px solid fade(@blue, 0%);
            }
        }
    }
}
</style>
